<template>
  <div class="debuger-container">
    
    <div class="icon" v-if="isShow" @click="onDebuger">
      <img :src="picUrl" alt>
    </div>
    <transition name="slide-fade" >
      <div class="body" v-if="!isShow" @click="onDebuger">
        <div>链接地址：{{ message.url }}</div>
        <div>环境：{{ message.env }}</div>
      </div>
    </transition>
  </div>
</template>
<script>
import vConsole from "vconsole";
export default {
  data() {
    return {
      isShow: true,
      message: {
        url: window.location.href,
        env:
          window.location.host == "activity.sdjjia.com" ? "测试服" : "开发环境"
      },
      picUrl: require("@/assets/img/bug.png")
    };
  },

  created() {
    let ovConsole = new vConsole();
  },
  methods: {
    onDebuger() {
      this.isShow = !this.isShow;
    }
  }
};
</script>
<style lang='less' scoped>
.debuger-container {
  // position: fixed;
  // top: 0;
  // width: 100%;
  // height: 100%;

  color: #fff;
}
.icon {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  width: 1rem;
  height: 1rem;
  padding: 0.1rem;
  border-radius: 0.2rem;
  background-color: #f00;
}
.body {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  font-size: 0.32rem;
}

.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
</style>